<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item :to="{ path: '/query/IntegratedQuery' }">
                <i class="el-icon-search"></i>
                综合查询
            </el-breadcrumb-item>
            <el-breadcrumb-item>图像</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main-container">
            <div class="header-control">
                <el-checkbox
                    style="margin-right:30px;"
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                >全选
                </el-checkbox>
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="onSuccess"
                    multiple
                    :on-exceed="handleExceed"
                >
                    <!-- <el-button size="small" type="primary">导入</el-button> -->
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
                <el-button
                    class="export-pic"
                    size="small"
                    type="primary"
                    @click="exportPic"
                    :loading="buttonExportStatus"
                >导出</el-button>
            </div>
            <div class="image-container">
                <el-checkbox-group
                    v-model="checkedPics"
                    @change="handleCheckedPicsChange"
                >
                    <el-checkbox
                        v-for="pic in pics"
                        :label="pic.target_path"
                        :key="pic.target_path"
                    >
                        <img
                            :src="imageServiceURL+pic.preview_url"
                            style="width:150px;height:150px;"
                        />
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DiagnosisBiopsyImages',
    data() {
        return {
            buttonExportStatus: false,
            imageServiceURL: process.env.ImageServiceURL,
            pathologyServiceURL: process.env.pathologyServiceURL,
            checkAll: false,
            checkedPics: [],
            isIndeterminate: true,
            pics: [],
            bindPics: [],
            patientName: '',
            PathologyId: '',
        };
    },
    mounted() {
        let _this = this;
        const { state } = this.$store;
        const { pathologyId } = state.diagnosis;
        this.$axios({
            method: 'GET',
            url: '/PROXY-Remote/biopsy/all-biopsy',
            params: {
                pathologyId,
            },
        }).then((res) => {
            // 请求失败
            if (res.data.code !== 200) {
                throw new Error(res.data);
            } else {
                _this.pics = res.data.data;
                _this.pics.forEach((item) => {
                    this.bindPics.push(item.target_path);
                });
                _this.patientName = res.data.data[0].name;
                _this.PathologyId = pathologyId;
            }
        });
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        beforeUpload(file) {
            console.log('file', file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onSuccess(response, file, fileList) {
            this.$message.success('导入成功');
        },
        // 点击全选
        handleCheckAllChange(val) {
            this.checkedPics = val ? this.bindPics : [];
            this.isIndeterminate = false;
            console.log(this.bindPics);
        },
        // 点击选择单个图片
        handleCheckedPicsChange(value) {
            console.log(value);
            const checkedCount = value.length;
            this.checkAll = checkedCount === this.pics.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.pics.length;
        },

        // 导出图片
        exportPic() {
            if (this.checkedPics.length == 0) {
                this.$message.warning('请选择需要导出的切片');
            } else {
                this.buttonExportStatus = true;
                let mIndex = 0;
                this.checkedPics.forEach((item) => {
                    let _this = this;
                    let fileSvs = item.split('/');
                    let url = `${this.pathologyServiceURL}/download/${fileSvs[3]}`;
                    let first = url.lastIndexOf('.'); //取到文件名开始到最后一个点的长度
                    let nameLength = url.length; //取到文件名长度
                    let fileSuffix = url.substring(first + 1, nameLength); //截取获得后缀名
                    const x = new XMLHttpRequest();
                    x.open('GET', url, true);
                    x.responseType = 'blob';
                    x.onload = function (e) {
                        mIndex++;
                        // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
                        const mUrl = window.URL.createObjectURL(x.response);
                        const a = document.createElement('a');
                        a.href = mUrl;
                        a.download =
                            _this.patientName +
                            _this.PathologyId +
                            '.' +
                            fileSuffix;
                        a.click();
                        if (mIndex === _this.checkedPics.length) {
                            _this.buttonExportStatus = false;
                        }
                    };
                    x.send();
                });
            }
        },
    },
};
</script>

<style>
.header-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.image-container .el-checkbox .el-checkbox__input {
    vertical-align: top;
}
</style>
